<template>
  <view class="picture">
    <view class="sentence">
      <view class="title">{{ titel }}</view>
      <text>{{ content }}</text>
    </view>
    <view class="sort">
      <view class="theme"> 头像 </view>
      <view class="box">
        <view
          class="classify"
          v-for="(item, index) in avatar_arr"
          :key="index"
          :style="{
            background: `url(${item.imgUrl}) no-repeat  center / cover`
          }"
          @click="pictureClick(item.type)"
        >
          <view class="classify-list flex-center">
            <text class="txt">{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="sort">
      <view class="theme"> 壁纸 </view>
      <view class="box">
        <view
          class="classify"
          v-for="(item, index) in wallPaper_arr"
          :key="index"
          :style="{
            background: `url(${item.imgUrl}) no-repeat  center / cover`
          }"
          @click="wallPaperClick(item.classify)"
        >
          <view class="classify-list flex-center">
            <text class="txt">{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { thirdApi } from '@/request/thirdApi.js'
import { type } from '@/uni_modules/uni-forms/components/uni-forms/utils'
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@/store/counter.js'
const store = useCounterStore()
onMounted(() => {
  getCopywriting()
})
const titel = ref('')
const content = ref('')
const avatar_arr = ref([
  {
    title: '男生头像',
    imgUrl:
      'https://pic.20988.xyz/2024-08-04/1722755818-393594-image-1722233511370.jpg',
    type: 1
  },
  {
    title: '女生头像',
    imgUrl:
      'https://pic.20988.xyz/2024-08-02/1722599016-149790-yhldxgs4d1j.jpg',
    type: 2
  },
  {
    title: '动漫头像',
    imgUrl:
      'https://pic.20988.xyz/2024-07-10/1720624668-523528-103535220-p0.jpg',
    type: 3
  }
])
// 壁纸
const wallPaper_arr = ref([
  {
    title: '二次元壁纸',
    imgUrl:
      'https://pic.20988.xyz/2024-09-29/1727577940-229608-6238001309936628598-121.jpg',
    classify: 0
  },
  {
    title: '美女壁纸',
    imgUrl:
      'https://pic.20988.xyz/2024-10-08/1728373449-428513-2024-10-08-15-39-05.jpg',
    classify: 1
  },
  {
    title: '风景壁纸',
    imgUrl:
      'https://pic.20988.xyz/2024-10-08/1728373332-813279-2024-10-08-15-38-33.jpg',
    classify: 2
  }
])
// 每次进入获取一次文案句子
async function getCopywriting() {
  try {
    const res = await thirdApi.getOne()
    let subStr = res.split(/，(.+)/) // 截取字符串
    console.log('subStr', subStr)
    titel.value = subStr[0]
    content.value = subStr[1]
  } catch (e) {
    console.log('error', e)
  }
}
// 进入头像页面
function pictureClick(type) {
  if (!store.userData.token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  uni.navigateTo({ url: `/pagesA/picture/detailPage?type=${type}` })
}
// 进入壁纸页面
function wallPaperClick(classify) {
  if (!store.userData.token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  uni.navigateTo({ url: `/pagesA/picture/wallpaper?classify=${classify}` })
}
</script>

<style lang="scss" scoped>
.picture {
  padding: 20rpx 20rpx;
  .sentence {
    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 12rpx;
    }
    text {
      font-size: 28rpx;
    }
  }
  .sort {
    margin-top: 40rpx;
    .theme {
      position: relative;
      font-size: 36rpx;
      margin-left: 40rpx;
      color: #90a4ae;
      &::after {
        position: absolute;
        content: '  ';
        display: block;
        top: 4rpx;
        left: -24rpx;
        width: 8rpx;
        height: 40rpx;
        border-radius: 8rpx;
        background-color: #007aff;
      }
    }
    .box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .classify {
        margin: 20rpx 0rpx 12rpx 0rpx;
        width: 48%;
        height: 168rpx;
        background-color: #f2f3f5;
        box-shadow: 0 0 20rpx rgba(255, 252, 252, 0.8),
          0 0 40rpx rgba(255, 255, 255, 0.6), 0 0 60rpx rgba(255, 255, 255, 0.4);
        border-radius: 12rpx;
        .classify-list {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
          &::before {
            position: absolute;
            content: '  ';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.4); /* 设置背景透明度 */
            z-index: 1;
          }
          .txt {
            position: relative;
            z-index: 2; /* 保证文字显示在透明层上 */
            color: #333333;
            font-size: 28rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
